<script setup lang="ts">
import {ref} from 'vue'
import {onLoad} from "@dcloudio/uni-app";
import {useSettingStore} from "@/store";
import {getActivityDetail, getSetting} from "@/service/api";

let passId = ref('')
let bg = ref()
let enableRating = ref(false)
const settingStore = useSettingStore()
onLoad(async (e: any) => {
  passId.value = e.id
  getDetail(e.id)
  let res = await getSetting()
  // 设置标题
  document.title = res.data.site_title
  // 设置背景颜色
  bg.value = res.data.theme_color
  // 是否开启评分
  enableRating.value = res.data.enable_rating
  settingStore.setSetting(res.data)
})

let detail: any = ref()
const getDetail = (id: string) => {
  getActivityDetail(id).then((res: any) => {
    detail.value = res.data
  })
}

let stars = ref(0)
let textareas = ref('')
let fileList1: any = ref([])

// 读取完图片
const afterRead = async (event: any) => {
  canSubmit.value = false
  // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file)
  let fileListLen: any = fileList1.value.length
  lists.map((item: any) => {
    fileList1.value.push({
      ...item,
      status: 'uploading',
      message: '上传中'
    })
  })
  for (let i = 0; i < lists.length; i++) {
    const result: any = await uploadFilePromise(lists[i].url)
    let item: any = fileList1.value[fileListLen]
    fileList1.value.splice(fileListLen, 1, Object.assign(item, {
      status: 'success',
      message: '',
      url: result
    }))
    fileListLen++
  }
  canSubmit.value = true
}

import {uploadUrl} from "@/service/request/config";
// 上传图片接口
const uploadFilePromise = (url: string) => {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: uploadUrl, // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      success: (res) => {
        let data = JSON.parse(res.data)
        setTimeout(() => {
          resolve(data.data.url)
        }, 1000)
      }
    });
  })
}

// 删除图片
const deletePic = (index: number) => {
  fileList1.value.splice(index, 1)
}

import {submitComment} from "@/service/api";

let canSubmit = ref(true)
// 提交
const doSubmit = () => {
  if (!canSubmit.value) return
  let params = {
    activity_id: passId.value,
    rating: stars.value,
    content: textareas.value,
    images: fileList1.value.map((item: any) => item.url).join(',')
  }
  submitComment(params).then((res: any) => {
    setTimeout(() => {
      uni.redirectTo({
        url: '/pages/index/list'
      })
    }, 1500)
  })
}

const goBack = () => {
  uni.redirectTo({
    url: '/pages/index/list'
  })
}
</script>

<template>
  <total-header @goBack="goBack"/>
  <view class="pl-30rpx pr-30rpx pb-150rpx" v-if="detail">
    <view class="items mt-36rpx">
      <view class="p-30rpx ">
        <view class="flex">
          <image :src="detail.image" mode="aspectFill" class="items_poster"/>
          <view class="ml-30rpx flex-1 flex flex-col flex-between items-start">
            <view class="text-30rpx">
              {{ detail.title }}
            </view>
            <view class="text-24rpx text-gray">
              <view>
                演讲人：{{ detail.speaker }}
              </view>
              <view class="mt-10rpx">
                {{ detail.activity_date }}
              </view>
            </view>
          </view>
        </view>
        <view class="mt-30rpx">
          <uv-parse :content="detail.content"/>
        </view>
        <view class="mt-20rpx flex items-center justify-center" v-if="enableRating">
          <uv-rate :count="5" v-model="stars" :gutter="10" size="40" active-color="#f86811" allow-half/>
          <view class="ml-30rpx text-40rpx" style="color: #f86811">{{ stars }}</view>
        </view>
        <view class="mt-30rpx info-box">
          <view class="paddings">
            <uv-textarea
                v-model="textareas"
                placeholder="欢迎您在此留下宝贵的意见或建议"
                :maxlength="200"
                height="100"
                border="none"
                :customStyle="{
                  background:'transparent',
                  padding: '0',
                }"
            />
            <view class="mt-30rpx">
              <uv-upload
                  :fileList="fileList1"
                  name="1"
                  multiple
                  :maxCount="9"
                  @afterRead="afterRead"
                  @delete="deletePic"
              ></uv-upload>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="footer" @click="doSubmit">
    <view class="p-30rpx flex-center items-center">
      <text class="text-32rpx text-white mr-10rpx">提交</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.items {
  box-shadow: 5rpx 0 20rpx rgba($color: #002e72, $alpha: 0.28);
  background: #fff;
  border-radius: 8rpx;

  &_poster {
    width: 230rpx;
    height: 160rpx;
    border-radius: 8rpx;
  }
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: v-bind(bg);
}

.info-box {
  background: #fbf9fa;

  .paddings {
    border: 1rpx solid #f3f3f3;
    border-radius: 8rpx;
    padding: 20rpx 16rpx;
  }
}
</style>
